<template>
  <el-container class="login">
    <el-main>
      <el-row>
        <el-col :span="24">
          <div class="login-box">
            <h2>用户登录</h2>
            <el-input
              placeholder="请输入用户名"
              prefix-icon="wow-icon-yonghuming"
              v-model="userName">
            </el-input>
            <el-input
              placeholder="请输入6-12位密码"
              prefix-icon="wow-icon-mima"
              type="password"
              v-model="password">
            </el-input>
            <el-button type="primary" @click="Login">登录</el-button>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: 'Login',
  data () {
    return {
      userName: '',
      password: ''
    }
  },
  methods: {
    Login () {

    }
  }
}
</script>
<style lang="scss">
.login{
  width: 100%;
  height: 100%;
  background: url(../assets/login_bg.jpg) no-repeat;
  background-size: 100% 100%;
  .el-main{
    width: 100%;
    margin: 0 auto;
    padding: 10%!important;
    background-color: none!important;
    .el-col-24{
      .login-box{
        width: 300px;
        height: 300px;
        box-shadow: 0 1px 16px 0 rgba(0,0,0,0.13);
        padding: 0 30px;
        background-color: #fff;
        h2{
          padding: 30px;
          text-align: center;
          font-size: 20px;
        }
        .el-input{
          width: 100%;
          height: 32px;
          line-height: 32px;
          margin-bottom: 20px;
        }
        .el-button{
          width: 100%;
          height: 36px;
          border-radius: 3px;
        }
      }
    }
  }
}
</style>
